<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import http from '@/http';


const regId = ref('');
const pName = ref('');

onMounted(() => {
  //调用获取当前页相关用户数据的方法
  getPage()
})

//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(4)
//总条数
let total = ref(0)
function getPage() {
  http.get('hisOrderCharge/getPageAll', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      regId: regId.value,
      patientName: pName.value
    }
  })
    .then((res) => {
      if (res != "") {
        orderData.value = res.list
        total.value = res.total
      }
    })
}

//搜索
function searchFor() {
  getPage()
}

//当前页发生改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  //获取当前页的数据
  getPage()
}
//订单详情信息
let orderDataDetails = ref([])
//查看详情
const viewDetails = (index, row) => {
  http.get('/hisOrderCharge/viewDtails?id='+row.orderId)
  .then((res)=>{
    orderDataDetails.value.push(res);
  })
  viewDetailsDialogVisible.value = true;

}

//查看详情的对话框
const viewDetailsDialogVisible = ref(false)

//所有订单数据
const orderData = ref([])


</script>
<template>
  <el-row>
    <el-col :span="8">
      <el-form-item label="挂号单号">
        <el-input v-model="regId" placeholder="请输入挂号单号" @change="searchFor" />
      </el-form-item>
    </el-col>
    &nbsp;
    <el-col :span="8">
      <el-form-item label="患者姓名">
        <el-input v-model="pName" placeholder="请选择患者姓名" @change="searchFor" />
      </el-form-item>

    </el-col>
    &nbsp;
    <el-col :span="6">
      <el-button type="primary" :icon="Search">搜索</el-button>
    </el-col>
  </el-row>

  <el-table :data="orderData" border style="width: 100%">
    <el-table-column property="orderId" label="订单号" align="center" />
    <el-table-column property="regId" label="挂号单号" align="center" />
    <el-table-column property="patientName" label="患者姓名" align="center" />
    <el-table-column property="orderAmount" label="总金额" align="center" />
    <el-table-column label="支付类型">
      <template #default="scope">
        <span v-if="scope.row.payType == 0">现金</span>
        <span v-else-if="scope.row.payType == 1">支付宝</span>
      </template>
    </el-table-column>
    <el-table-column label="订单状态">
      <template #default="scope">
        <span v-if="scope.row.orderStatus == 0">未支付</span>
        <span v-else-if="scope.row.orderStatus == 1">已支付</span>
        <span v-else-if="scope.row.orderStatus == 2">支付超时</span>
        <span v-else-if="scope.row.orderStatus == 3">支付失败</span>
      </template>
    </el-table-column>
    <el-table-column property="createTime" label="创建时间" align="center" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" v-if="scope.row.orderStatus == 1" type="primary"
          @click="viewDetails(scope.$index, scope.row)">
          查看详情
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <!-- 分页 -->
  <el-row justify="center">
    <el-col :span="14" :offset="6">
      <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
        v-model:current-page="pageNum" @current-change="handleCurrentChange" />
    </el-col>
  </el-row>

  <el-dialog v-model="viewDetailsDialogVisible" title="详情" width="1000" center>
    <el-table :data="orderDataDetails" border style="width: 100%">
      <el-table-column property="orderId" label="订单号" align="center" />
      <el-table-column property="regId" label="挂号单号" align="center" />
      <el-table-column property="chId" label="病例Id" align="center" />
      <el-table-column property="patientName" label="患者姓名" align="center" />
      <el-table-column property="orderAmount" label="总金额" align="center" />
      <el-table-column property="payTime" label="支付时间" align="center" />
      <el-table-column label="支付类型">
        <template #default="scope">
          <span v-if="scope.row.payType == 0">现金</span>
          <span v-else-if="scope.row.payType == 1">支付宝</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template #default="scope">
          <span v-if="scope.row.orderStatus == 0">未支付</span>
          <span v-else-if="scope.row.orderStatus == 1">已支付</span>
          <span v-else-if="scope.row.orderStatus == 2">支付超时</span>
          <span v-else-if="scope.row.orderStatus == 3">支付失败</span>
        </template>
      </el-table-column>
      <el-table-column property="createTime" label="创建时间" align="center" />
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="viewDetailsDialogVisible = false">
          退出
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<style scoped></style>
